import Link from "next/link";
import { Button } from "@repo/ui/button";
import styles from "./page.module.css";
import ProductList from "./components/ProductList";

// ISR配置 - 每60秒重新验证banner和推荐内容
export const revalidate = 60;

// 模拟数据 - 这些会被ISR缓存
const bannerData = {
  title: "限时特惠",
  subtitle: "精选商品低至5折",
  image: "/banner-bg.jpg",
  cta: "立即抢购"
};

const recommendedProducts = [
  {
    id: 1,
    name: "无线蓝牙耳机",
    price: 299,
    originalPrice: 599,
    image: "/product1.jpg",
    rating: 4.8,
    sales: 1234
  },
  {
    id: 2,
    name: "智能手表",
    price: 899,
    originalPrice: 1299,
    image: "/product2.jpg",
    rating: 4.6,
    sales: 856
  },
  {
    id: 3,
    name: "便携充电宝",
    price: 99,
    originalPrice: 199,
    image: "/product3.jpg",
    rating: 4.9,
    sales: 2341
  },
  {
    id: 4,
    name: "无线充电器",
    price: 159,
    originalPrice: 299,
    image: "/product4.jpg",
    rating: 4.7,
    sales: 678
  }
];

export default function Home() {
  return (
    <div className={styles.page}>
      {/* Banner区域 - ISR缓存 */}
      <section className={styles.banner}>
        <div className={styles.bannerContent}>
          <h1>{bannerData.title}</h1>
          <p>{bannerData.subtitle}</p>
          <Button appName="web" className={styles.bannerButton}>
            {bannerData.cta}
          </Button>
        </div>
        <div className={styles.bannerImage}>
          <div className={styles.bannerPlaceholder}>
            🎉 限时特惠
          </div>
        </div>
      </section>

      {/* 推荐商品区域 - ISR缓存 */}
      <section className={styles.recommended}>
        <div className={styles.sectionHeader}>
          <h2>🔥 热门推荐</h2>
          <p>基于大数据分析，为您精选优质商品</p>
        </div>
        <div className={styles.recommendedGrid}>
          {recommendedProducts.map((product) => (
            <div key={product.id} className={styles.recommendedCard}>
              <div className={styles.productImage}>
                <div className={styles.imagePlaceholder}>
                  📱
                </div>
              </div>
              <div className={styles.productInfo}>
                <h3>{product.name}</h3>
                <div className={styles.priceInfo}>
                  <span className={styles.currentPrice}>¥{product.price}</span>
                  <span className={styles.originalPrice}>¥{product.originalPrice}</span>
                </div>
                <div className={styles.productMeta}>
                  <span className={styles.rating}>⭐ {product.rating}</span>
                  <span className={styles.sales}>已售 {product.sales}</span>
                </div>
                <Button appName="web" className={styles.buyButton}>
                  立即购买
                </Button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* 个性化商品列表 - 客户端渲染，支持分页 */}
      <section className={styles.productList}>
        <div className={styles.sectionHeader}>
          <h2>🎯 为您推荐</h2>
          <p>基于您的浏览历史和偏好，个性化推荐商品</p>
        </div>
        <ProductList />
      </section>

      {/* 导航区域 */}
      <section className={styles.navigation}>
        <div className={styles.navGrid}>
          <Link href="/about" className={styles.navCard}>
            <div className={styles.navIcon}>📄</div>
            <h3>SSG页面</h3>
            <p>静态站点生成示例</p>
          </Link>
          <Link href="/user/1" className={styles.navCard}>
            <div className={styles.navIcon}>👤</div>
            <h3>SSR页面</h3>
            <p>服务端渲染示例</p>
          </Link>
          <Link href="/realtime" className={styles.navCard}>
            <div className={styles.navIcon}>⚡</div>
            <h3>CSR页面</h3>
            <p>客户端渲染示例</p>
          </Link>
          <Link href="/admin" className={styles.navCard}>
            <div className={styles.navIcon}>🔄</div>
            <h3>管理页面</h3>
            <p>On-demand Revalidation 演示</p>
          </Link>
        </div>
      </section>

      {/* 页脚 */}
      <footer className={styles.footer}>
        <p>© 2024 Next.js 渲染模式演示</p>
        <p>ISR混合模式：Banner和推荐内容缓存，商品列表个性化推荐</p>
      </footer>
    </div>
  );
}
